<template>
	<view>
		<musichead title='网易云音乐' :icon="false"></musichead>
		<!-- 首页内部内容滑动区域 -->
		<view class="container">
			<scroll-view scroll-y="true" >
				<!-- 搜索模块 -->
				<view class="index-search" @tap="handleToSearch">
					<text class="iconfont icon-search"></text>
					<input placeholder="搜索歌曲"/>
				</view>
				<!-- 歌曲内容模块 -->
				<view class="index-list" v-for="(item, index) in topList" :key=index @tap="goToList(item.listId)">
					<view class="index-list-item">
						<!-- 左侧 -->
						<view class="index-list-img">
							<image :src="item.coverImgUrl" mode=""></image>
							<text>{{ item.updateFrequency }}</text>
						</view>
						<!-- // 右侧字体 -->
						<view class="index-list-text" >
							<view v-for="(item, index) in item.tracks" :key=index>{{ index + 1}}. {{ item.first }} - {{ item.second }}</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import "@/common/iconfont.css"			// 引入fonticont字体 css
	import musichead from "../../components/musichead/musichead.vue"
	import { topList } from "../../common/api.js"
	
	export default {
		data() {
			return {
				title: 'Hello',
				topList: []
			}
		},
		components:{
			musichead
		},
		onLoad() {
			topList().then((res)=>{
				if (res.length){
					this.topList = res
				}
			}, (err)=>{})
		},
		methods: {
			goToList(listId){
				uni.navigateTo({
					url: "../list/list?listId=" + listId
				})
			}, 
			handleToSearch(){
				uni.navigateTo({
					url: '../search/search'
				})
			}
		}
	}
</script>

<style>
.index-search{
	display: flex;
	align-items: center;
	height: 70rpx;
	margin: 70rpx 30rpx 30rpx 30rpx;
	background-color: #f7f7f7;
	border-radius: 35rpx;
}
.index-search text{
	font-size: 26rpx;
	margin-right: 26rpx;
	margin-left: 26rpx;
}
.index-search input{
	font-size: 28rpx;
	flex: 1;
}

.index-list{
	margin: 0 30rpx;
}
.index-list-item{
	display: flex;
	margin-bottom: 34rpx;
}
.index-list-img{
	width: 212rpx;
	height: 212rpx;
	position: relative;
	border-radius: 30rpx;
	overflow: hidden;
	margin-right: 22rpx;
}
.index-list-img image{
	height: 100%;
	width: 100%;
}
.index-list-img text{
	position: absolute;
	left: 12rpx;
	bottom: 14rpx;
	color: #FFFFFF;
	font-size: 22rpx;
}
.index-list-text{
	flex: 1;
	font-size: 24rpx;
	line-height: 68rpx;
}
.index-list-text view{
	
}
</style>
